<script>
	import anime from 'animejs';

	function handler_animejs(params) {
		anime({
			targets: '.test',
			backgroundColor: {
				value: function () {
					var r = parseInt(Math.random() * 255);
					var g = parseInt(Math.random() * 255);
					var b = parseInt(Math.random() * 255);
					return 'rgb(' + r + ',' + g + ',' + b + ')';
				}
			},
			translateX: function (el) {
				return el.getAttribute('data-x');
			},
			translateY: function (el, i) {
				return 50 + -50 * i;
			},
			scale: function (el, i, l) {
				return l - i + 0.25;
			},
			rotate: function () {
				return anime.random(-360, 360);
			},
			borderRadius: function () {
				return ['50%', anime.random(10, 35) + '%'];
			},
			duration: function () {
				return anime.random(1200, 1800);
			},
			delay: function () {
				return anime.random(0, 400);
			},
			direction: 'alternate',
			loop: true
		});
	}
</script>

<div class="test" />
<div on:click={handler_animejs}>
	<div data-x="170" class="test" />
	<div data-x="80" class="test" />
	<div data-x="20" class="test" />
</div>

<style>
	.test {
		margin-top: 50px;
		width: 80px;
		height: 80px;
		background: #fff;
	}
</style>
